<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device,initial-scale=1">
    <link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="reset.css" rel="stylesheet">
    <link href="icon.css" rel="stylesheet">
    <link href="orderList.css" rel="stylesheet">
    <script src="orderList.js"></script>
    <title>饿了么 我的订单</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>

<body>
    <div class="wrapper">
        <!--  header部分-->
        <header>
            <p>我的订单</p>
        </header>
        <!--  订单列表部分  -->
        <h3>未支付订单信息：</h3>
        <ul class="order unpay">
            <!-- <li>
                <div class="order-info">
                    <p>万家饺子（软件园E18店）
                        <i class="fa fa-caret-down"></i>
                    </p>
                    <div class="order-info-right">
                        <p>&#165;49</p>
                        <div class="order-info-right-icon">去支付</div>
                    </div>
                </div>
                <ul class="order-detailed">
                    <li>
                        <p>纯肉鲜肉(水饺） x 2</p>
                        <p>&#165;15</p>
                    </li>
                    <li>
                        <p>玉米鲜肉(水饺） x 2</p>
                        <p>&#165;16</p>
                    </li>
                    <li>
                        <p>配送费</p>
                        <p>&#165;3</p>
                    </li>
                </ul>
            </li> -->
        </ul>
        <h3>已支付订单信息：</h3>
        <ul class="order payed">
            <!-- <li>
            <div class="order-info">
                <p>万家饺子（软件园E18店）
                    <i class="fa fa-caret-down"></i>
                </p>
                <div class="order-info-right">
                    <p>&#165;49</p>
                </div>
            </div>
            <ul class="order-detailed">
                <li>
                    <p>纯肉鲜肉(水饺） x 2</p>
                    <p>&#165;15</p>
                </li>
                <li>
                    <p>玉米鲜肉(水饺） x 2</p>
                    <p>&#165;16</p>
                </li>
                <li>
                    <p>配送费</p>
                    <p>&#165;3</p>
                </li>
            </ul>
        </li> -->
        </ul>
        <!--    底部菜单部分-->
        <ul class="footer">
            <li onclick="location.href='index.html' ">
                <i class="fa fa-home"></i>
                <p>首页</p>
            </li>
            <li onclick="location.href='Message.html'">
                <i class="fa fa-compass"></i>
                <p>消息</p>
            </li>
            <li onclick="location.href='orderList.html' ">
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
            <li onclick="location.href='Person.html' ">
                <i class="fa fa-user-o"></i>
                <p>我的</p>
            </li>
        </ul>
    </div>
</body>


<script>
    function getUserInfo() {
        // 从 cookie 中读取用户信息
        var userInfoString = $.cookie('userInfo');
        if (userInfoString) {
            return JSON.parse(userInfoString);
        } else {
            window.location.href = 'login.html';
        }
    }

    function toggleShowBtn() {
        //    获取显示隐藏按钮DOM对象
        let showBtnArr = document.getElementsByClassName('fa-caret-down');
        //    获取订单明细DOM对象
        let detailedBoxArr = document.getElementsByClassName('order-detailed');
        //设置默认所有订单明细均隐藏
        for (let i = 0; i < showBtnArr.length; i++) {
            detailedBoxArr[i].style.display = 'none';
        }
        for (let i = 0; i < showBtnArr.length; i++) {
            showBtnArr[i].onclick = function () {
                if (detailedBoxArr[i].style.display == 'none') {
                    detailedBoxArr[i].style.display = 'block';
                } else {
                    detailedBoxArr[i].style.display = 'none';
                }
            }
        }
    }

    function toPay(orderId) {
        var userInfo = getUserInfo();
        window.location.href = 'payment.html?orderId=' + orderId
    }

    function listOrders(orderId) {
        $.ajax({
            url: 'http://127.0.0.1:8081/order/listOrderByUserId?userId=' + getUserInfo().userId,
            type: 'POST',
            contentType: 'application/json; charset=UTF-8', // 设置内容类型为 JSON
            success: function (res) {
                if (res.flag) {
                    console.log(res)
                    var unpayhtml = [];
                    var payedhtml = [];
                    for (var i = 0; i < res.data.length; i++) {
                        if (res.data[i].orderState == 0) {
                            unpayhtml.push('<li>                                                   ')
                            unpayhtml.push('	<div class="order-info">                              ')
                            unpayhtml.push('		<p>' + res.data[i].shop.shopName + '                            ')
                            unpayhtml.push('		<i class="fa fa-caret-down"></i>                  ')
                            unpayhtml.push('		</p>                                              ')
                            unpayhtml.push('		<div class="order-info-right">                    ')
                            unpayhtml.push('			<p>&#165;' + res.data[i].orderTotal + '</p>                               ')
                            unpayhtml.push('			<div class="order-info-right-icon" onclick=toPay('+res.data[i].orderId+')>去支付</div')
                            unpayhtml.push('		</div>                                            ')
                            unpayhtml.push('	</div>                                                ')
                            unpayhtml.push('	</div>                                                ')
                            unpayhtml.push('	<ul class="order-detailed">                           ');
                            for (var j = 0; j < res.data[i].list.length; j++) {
                                unpayhtml.push('		<li style="font-size: 3.4vw;">                                              ')
                                unpayhtml.push('			<p>' + res.data[i].list[j].food.foodName + ' x ' + res.data[i].list[j].quantity + '</p>                    ')
                                unpayhtml.push('			<p>&#165;' + res.data[i].list[j].totalPrice + '</p>                               ')
                                unpayhtml.push('		</li>                                             ')
                            }
                            unpayhtml.push('		<li style="font-size: 3.4vw;">                                              ')
                            unpayhtml.push('			<p>配送费</p>                                 ')
                            unpayhtml.push('			<p>&#165;' + res.data[i].deliveryPrice + '</p>                                ')
                            unpayhtml.push('		</li>                                             ')
                            unpayhtml.push('	</ul>                                                 ')
                            unpayhtml.push('</li>                                                  ')
                        } else if (res.data[i].orderState == 1) {
                            payedhtml.push('<li>                                                   ')
                            payedhtml.push('	<div class="order-info">                              ')
                            payedhtml.push('		<p>' + res.data[i].shop.shopName + '                            ')
                            payedhtml.push('		<i class="fa fa-caret-down"></i>                  ')
                            payedhtml.push('		</p>                                              ')
                            payedhtml.push('		<div class="order-info-right">                    ')
                            payedhtml.push('			<p>&#165;' + res.data[i].orderTotal + '</p>                               ')
                            payedhtml.push('		</div>                                            ')
                            payedhtml.push('	</div>                                                ')
                            var detail = [];
                            payedhtml.push('	<ul class="order-detailed">                           ');
                            for (var j = 0; j < res.data[i].list.length; j++) {
                                detail.push('		<li style="font-size: 3.4vw;">                                              ')
                                detail.push('			<p>' + res.data[i].list[j].food.foodName + ' x ' + res.data[i].list[j].quantity + '</p>                    ')
                                detail.push('			<p>&#165;' + res.data[i].list[j].totalPrice + '</p>                               ')
                                detail.push('		</li>                                             ')
                            }

                            detail.push('		<li style="font-size: 3.4vw;">                                              ')
                            detail.push('			<p>配送费</p>                                 ')
                            detail.push('			<p>&#165;' + res.data[i].deliveryPrice + '</p>                                ')
                            detail.push('		</li>                                             ')
                            detail.push('	</ul>                                                 ')
                            payedhtml.push(detail.join(''))
                            payedhtml.push('</li>                                                  ')
                        }
                    }
                    $('.order.unpay').html(unpayhtml.join(''))
                    $('.order.payed').html(payedhtml.join(''))
                    toggleShowBtn();
                } else {
                    alert(res.message)
                }
            },
            error: function (xhr, status, error) {
                alert('查询失败：' + xhr.statusText);
            }
        });
    }
   

    $(document).ready(function () {
        var userInfo = getUserInfo();
        console.log(userInfo);
        listOrders();
    });
</script>

</html>